<template>
  <div class="bg_white" style="height: calc(100vh - 198px);">
    <a-row>
      <a-col :span="24" style="width: 100%;margin-bottom: 10px;" label="班级名称">
        <a-form-model layout="inline" :model="formInline">
          <a-form-model-item label="学生名称">
            <a-input allow-clear v-model="formInline.user" style="width: 250px" placeholder="请输入学生名称" />
          </a-form-model-item>
          <a-form-model-item label="学校名称">
            <a-select default-value="全部" style="width: 200px"></a-select>
          </a-form-model-item>
          <a-form-model-item label="选择时间">
            <a-range-picker @change="onChange" style="width: 200px" />
          </a-form-model-item>
          <a-form-model-item>
            <a-button type="primary" html-type="submit" @click="serch">搜索</a-button>
          </a-form-model-item>
        </a-form-model>
      </a-col>
    </a-row>

    <a-modal v-model="visible" :title="title" on-ok="handleOk">
      <template slot="footer">
        <a-button key="back" @click="handleCancel"> Return </a-button>
        <a-button key="submit" type="primary" :loading="loading" @click="handleOk">
          Submit
        </a-button>
      </template>
      <p>Some contents...</p>
      <p>Some contents...</p>
      <p>Some contents...</p>
      <p>Some contents...</p>
      <p>Some contents...</p>
    </a-modal>

    <div style=" background: #fff; border-radius: 6px">
      <a-table :row-selection="rowSelection" :columns="columns" :data-source="data" :pagination="false" bordered :rowKey="(record, index) => {
          return index;
        }
        ">
        <span slot="status" slot-scope="text, record">
          {{ record.status == 1 ? "启用" : "禁用" }}
        </span>
      </a-table>
      <a-pagination style="margin: 10px 0;" v-model="current" :page-size-options="pageSizeOptions" :total="total" show-size-changer
        :page-size="pageSize" @showSizeChange="onShowSizeChange">
        <template slot="buildOptionText" slot-scope="props">
          <span v-if="props.value !== '50'">{{ props.value }}条/页</span>
          <span v-if="props.value === '50'">全部</span>
        </template>
      </a-pagination>
    </div>
  </div>
</template>
    
<script>
import contacts from "@/api/organizations";
const columns = [
  {
    title: "编号",
    dataIndex: "roleName",
  },
  {
    title: "学校名",
    dataIndex: "roleName",
  },
  {
    title: "班级名",
    dataIndex: "roleName",
  },
  {
    title: "星级",
    dataIndex: "roleName",
  },
  {
    title: "教师情况",
    dataIndex: "roleName",
  },
  {
    title: "图片",
    dataIndex: "roleName",
  },
  {
    title: "视频",
    dataIndex: "roleName",
  }
];

const x = 3;
const y = 2;
const z = 1;
const gData = [];

const generateData = (_level, _preKey, _tns) => {
  const preKey = _preKey || "0";
  const tns = _tns || gData;

  const children = [];
  for (let i = 0; i < x; i++) {
    const key = `${preKey}-${i}`;
    tns.push({ title: key, key, scopedSlots: { title: "title" } });
    if (i < y) {
      children.push(key);
    }
  }
  if (_level < 0) {
    return tns;
  }
  const level = _level - 1;
  children.forEach((key, index) => {
    tns[index].children = [];
    return generateData(level, key, tns[index].children);
  });
};
generateData(z);

const dataList = [];
const generateList = (data) => {
  for (let i = 0; i < data.length; i++) {
    const node = data[i];
    const key = node.key;
    dataList.push({ key, title: key });
    if (node.children) {
      generateList(node.children);
    }
  }
};
generateList(gData);

const getParentKey = (key, tree) => {
  let parentKey;
  for (let i = 0; i < tree.length; i++) {
    const node = tree[i];
    if (node.children) {
      if (node.children.some((item) => item.key === key)) {
        parentKey = node.key;
      } else if (getParentKey(key, node.children)) {
        parentKey = getParentKey(key, node.children);
      }
    }
  }
  return parentKey;
};
export default {
  data() {
    return {
      expandedKeys: [],
      searchValue: "",
      autoExpandParent: true,
      gData,
      columns,
      title: '',
      visible: false,
      total: 0,
      current: 1,
      pageSizeOptions: ["10", "20", "30", "40", "50"],
      pageSize: 10,
      formInline: {},
      selectedRowKeys: [],
    };
  },
  computed: {
    rowSelection() {
      const { selectedRowKeys } = this;
      return {
        selectedRowKeys,
        onChange: this.onSelectChange,
        hideDefaultSelections: true,
        onSelection: this.onSelection,
      };
    },
  },
  mounted() {
    this.getRole();
  },
  methods: {
    onShowSizeChange(current, pageSize) {
      console.log(current, pageSize);
    },
    handleCancel() {
      this.visible = false;
    },
    handleOk() {
      this.visible = false;
    },
    showDeleteConfirm(obj) {
      let that = this;
      this.$confirm({
        title: "您确定要删除这条数据吗",
        content: "此操作可能有风险",
        okText: "确定",
        okType: "danger",
        cancelText: "否",
        onOk() {
          //   contacts.delOrg(obj).then((res) => {
          //     if (res.data == "删除成功") {
          //       that.$message.success("删除成功");
          //       that.getInit();
          //     }
          //   });
          alert("OK");
        },
        onCancel() { },
      });
    },
    serch() {
    },
    editApplication(value) {
      this.title = "修改报名"
      this.visible = true;
    },
    handleOk() {
      this.visible = false;
    },
    addApplication() {
      this.title = "新增报名"
      this.visible = true;
    },
    actionUser(id) {
      this.$message.success(id);
    },
    actionMenu(id) {
      this.$message.success(id);
    },
    getRole() {
      // contacts.getRole().then(
      //   (res) => {
      //     this.data = res.data;
      //   },
      //   (err) => { }
      // );
    },
    onSelectChange(selectedRowKeys) {
      console.log("selectedRowKeys changed: ", selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
    onExpand(expandedKeys) {
      this.expandedKeys = expandedKeys;
      this.autoExpandParent = false;
    },
    onChange(e) {
      const value = e.target.value;
      const expandedKeys = dataList
        .map((item) => {
          if (item.title.indexOf(value) > -1) {
            return getParentKey(item.key, gData);
          }
          return null;
        })
        .filter((item, i, self) => item && self.indexOf(item) === i);
      Object.assign(this, {
        expandedKeys,
        searchValue: value,
        autoExpandParent: true,
      });
    },
  },
};
</script>
    
<style lang="less" scoped>
.ant-layout-header {
  background: #03212100 !important;
}

.vtl {
  .vtl-drag-disabled {
    background-color: #d0cfcf;

    &:hover {
      background-color: #d0cfcf;
    }
  }

  .vtl-disabled {
    background-color: #d0cfcf;
  }
}
</style>
    